<template>
	<view class="login column">
		<image src="@/static/login-bg.png" mode="widthFix" class="login-bg"></image>
		<button class="login-btn center" hover-class="hoverClass" hover-stay-time=".3s" @click="base.navigateTo('/pages/index/index')">开启合照之旅</button>

		<view class="login-agree column-center">
			<image src="@/static/logo.png" mode="widthFix" class="logo"></image>
			<text>由记记旅忆库和广州博物馆合作推出</text>
		</view>
	</view>
</template>

<script setup>
import { httpConfig } from '@/utils/env.js';
import { http } from 'uview-plus';
import { useStore } from 'vuex';
import { ref, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import base from '@/utils';

const store = useStore();
const { proxy } = getCurrentInstance();

const agree = ref(false);

function radioChange(e) {
	agree.value = true;
}

function showAgreeTips() {
	uni.showToast({
		title: `请先阅读并同意隐私协议和用户协议`,
		icon: 'none'
	});
}

function goTo(url) {
	uni.navigateTo({
		url
	});
}

async function getPhoneNumber(e) {
	if (e.detail.errMsg === 'getPhoneNumber:ok') {
		uni.showLoading({
			title: '登录中...'
		});
		const { encryptedData, iv, code } = e.detail;

		let loginRes = await uni.login();
		let verificationRes = await http.post('/wx/login/verification', {
			code: loginRes.code,
			appId: httpConfig.appId
		});
		let { data } = await http.post('/wx/login/register', {
			code,
			openId: verificationRes.data,
			appId: httpConfig.appId
		});
		uni.setStorageSync('token', data);
		store.dispatch('user/getUserInfo');
		uni.switchTab({
			url: '/pages/index/index'
		});
		uni.hideLoading();
	} else {
		console.error('用户拒绝授权');
	}
}
</script>

<style lang="scss" scoped>
.login {
	width: 100vw;
	height: 100vh;
	position: relative;
	padding-top: 93vw;

	&-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	&-btn {
		width: 91vw;
		height: 12vw;
		background: #ffd000;
		border-radius: 6vw 6vw 6vw 6vw;
		font-weight: bold;
		font-size: 4vw;
		color: #000000;
		text-align: center;
		position: relative;
		z-index: 10;
	}
}

.login-agree {
	width: 100vw;
	position: fixed;
	z-index: 10;
	left: 0;
	bottom: 5vw;

	image {
		width: 11.2vw;
	}

	text {
		margin-top: 3vw;
		font-weight: 500;
		font-size: 2.8vw;
		color: #4c3f04;
		line-height: 3.2vw;
	}
}
</style>
